<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in list" :key="item.path">
      <a href="#">{{ item.title }}</a>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: "BreakCrumb",
  data() {
    return {
      list: [],
    };
  },
  watch: {
    $route: {
      immediate: true, //立即监听  不管当前页面所有的路由变不变化 创建的初始就执行一遍 开始监听
      handler(route) {
        // console.log("route", route);
        // matched:匹配
        const arr = route.matched
          .map((item) => ({
            path: item.path,
            title: item.meta && item.meta.title,
            redirect: item.redirect,
          }))
          .filter((item) => item.title); // 筛选出有title的项
        // 在面包屑导航的前面加上 首页
        const first = arr[0];
        // 判断 arr 的第一个元素 是不是首页 如果不是就添加一个首页
        if (first.title !== "首页") {
          arr.unshift({ path: "/dashboard", title: "首页" });
        }

        this.list = arr;
      },
    },
  },
  methods: {
    onClick(data) {
      console.log("data", data);
      if (data.redirect) return this.$router.push(data.redirect);

      // 判断当前点击的路由 是不是和我们要跳转的路由不一样，如果不一样就进行跳转
      if (this.$route.path !== data.path) return this.$router.push(data.path);
    },
  },
};
</script>

<style scoped></style>
